<template>
	<view>
		<!-- 顶部轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="item,k in swiperImg" :key="k">				
					<view class="swiper-item">
						<image style="width: 100%;height: 100%;" :src="item" @click="preview(k)"></image>							
					</view>
				</swiper-item>
				<view v-if="videoSrc" class="swiper-item">
					<video
						class="video"
						:src="videoSrc"
						:enable-play-gesture="true"
						:muted="true" 
						:vslide-gesture="true" 
						:autoplay="false" 
						:page-gesture="true" 
						:show-mute-btn="true"
						controls="false"
					>
					</video>
				</view>
			</swiper>
		</view>
		
		<view class="car-info">
			<view class="info-left">
				<view class="car-name">{{productInfo.name}}</view>
				<view class="carde">
					<view class="carpeizhi">
						{{productInfo.gearbox}}|{{productInfo.emission}}|{{productInfo.fuel}}|{{productInfo.seat}}
					</view>
					<view class="cardetail" @click="show = true">
						详情 >
					</view>
				</view>
			</view>
		    <view class="info-right">
		    	<view class="right-price">
		    		<view class="" style="color: red;">
		    			￥
		    		</view>
					<view class="" style="color: red;font-size: 1.3rem;">
						{{productInfo.price}}
					</view>
					<view class="">
						/均价
					</view>
		    	</view>
		    </view>
		    
		</view>
		<u-popup v-model="show" mode="bottom">
			<view class="configuration">
				<view class="configuration-title">
					车型配置
				</view>
				<view class="configuration-content">
					<view class="content-item">
						<view class="item-top">
							{{productInfo.fuel}}
						</view>
						<view class="item-bottom">
							燃料类型
						</view>
					</view>
					<view class="content-item">
						<view class="item-top">
							{{productInfo.seat}}
						</view>
						<view class="item-bottom">
							座位数
						</view>
					</view>
					<view class="content-item">
						<view class="item-top">
							{{productInfo.emission}}
						</view>
						<view class="item-bottom">
							排放标准
						</view>
					</view>
					<view class="content-item">
						<view class="item-top">
							{{productInfo.gearbox}}
						</view>
						<view class="item-bottom">
							变速箱
						</view>
					</view>
					<view class="content-item">
						<view class="item-top">
							{{productInfo.displacement}}
						</view>
						<view class="item-bottom">
							排量
						</view>
					</view>
					<view class="content-item">
						<view class="item-top">
							{{productInfo.color}}色
						</view>
						<view class="item-bottom">
							颜色
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<view class="seecomment" @click="gocomment(productInfo.id)">
			<view class="seecomment-text">
				<view class="text-left">
					<!-- <view class="" style="color: #e27c30;font-size: 20px;align-self: flex-end;">
						{{commentData.average}}
					</view>
					<view class="" style="font-size: 14px;margin-top: 5px;">
						评分
					</view> -->
				</view>
				<view class="text-right">
					<view class="">
						共有
					</view>
					<view class="" style="color: #e27c30;">
						{{commentData.count}}
					</view>
					<view class="">
						条用户评价 >
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="select">
			<view class="sel-top">
				<view class="top-title">
					选择门店
				</view>
				<view class="top-content" @click="mendianShow = false">
					{{mendian}}
				</view>
			</view>
			<view class="sel-content">
				<view class="con-title">
					选择日期
				</view>
				<view class="con-content" @click="dataShow = true">
					<view class="content-item">
						<view class="item-title">
							取车日期
						</view>
						<view class="item-top">
							{{start}}
						</view>
						<view class="item-bot">
							{{startweek}}
						</view>
					</view>
					<view class="content-item" style="margin-top: 40rpx;">
						{{data}}
					</view>
					<view class="content-item">
						<view class="item-title">
							还车日期
						</view>
						<view class="item-top">
							{{end}}
						</view>
						<view class="item-bot">
							{{endweek}}
						</view>
					</view>
				</view>
			</view>
			<view class="sel-time">
				<view class="time-title">
					选择时间
				</view>
				<view class="time-content">
					<view class="con-content" @click="timeShow = true">
						<view class="content-item">
							<view class="item-title">
								取车时间
							</view>
							<view class="item-top">
								{{starttime}}
							</view>
						</view>
						<view class="content-item" style="margin-top: 40rpx;">
							{{data}}
						</view>
						<view class="content-item">
							<view class="item-title">
								还车时间
							</view>
							<view class="item-top">
								{{endtime}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="today == start" class="" style="color: #db8b36;font-size: 0.9rem;text-align: center;">
				请预留两小时取车
			</view>
			<view v-show="buttips" class="" style="color: #db8b36;font-size: 0.9rem;text-align: center;">
				已增加两小时预留取车
			</view>
		</view>
		<u-select v-model="mendianShow" :list="mendianList" @confirm="selMendian"></u-select>
		<u-select v-model="timeShow" title="取车时间 和 还车时间" mode="mutil-column" :list="timelist" @confirm="timeConfirm"></u-select>
		<u-calendar 
			v-model="dataShow" 
			:mode="range" 
			start-text="取车" 
			end-text="还车" 
			min-date="2023-09-15"
			max-date="2025-09-15"
			@change="change">
		</u-calendar>
		
		<view class="quany">
			<view class="quanyititle">
				尊享权益
			</view>
			<view class="quanyiimage">
				<view class="imgitem">
					<image src="../../static/quan1.png" mode=""></image>
					高端品牌
				</view>
				<view class="imgitem">
					<image src="../../static/quan2.png" mode=""></image>
					优质车况
				</view>
				<view class="imgitem">
					<image src="../../static/quan3.png" mode=""></image>
					优质服务
				</view>
			</view>
		</view>	
		
		<view class="but" v-if="hirecar == false">
			<u-button :custom-style="customStyle" type="primary" shape="circle" disabled="true">当前时间已租满</u-button>
		</view>
		<view class="but" v-if="hirecar == true">
			<u-button :custom-style="customStyle" type="primary" shape="circle" @click="selectCar(mendianId,start,end,productInfo.id)">去预定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData: [],
				openid: '',
				butvalue: 1,
				show: false,
				indicatorDots: true,
				buttips: false,
				autoplay: true,
				interval: 6000,
				duration: 500,
				productId: 0,
				videoSrc: '',
				avatar: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				productInfo: [],
				conmentList: [],
				cartInfo: {
					mendian: 1,
					name: 'abc',
					id: 1
				},
				swiperImg: [],
				mendianShow: false,
				mendian: '请选择门店',
				mendianId: 0,
				mendianList: [
					{
						value: '1',
						label: '拱北店'
					},
					{
						value: '2',
						label: '香洲店'
					}
				],
				dataShow: false,
				timeShow: false,
				range: 'range',
				data: '至',
				start: '',//取车日期
				starttime: '00:00',//取车时间
				startweek: '',
				end: '',//还车日期
				endtime: '00:00',//还车时间
				endweek: '',
				commentData: [],
				customStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff',
					backgroundColor: '#e27c30',
					borderColor: '#e27c30',
				},
				today: '',
				hirecar: true,
				timelist: [
					[
						{
							value: '1',
							label: '08:00'
						},
						{
							value: '2',
							label: '08:30'
						},
						{
							value: '3',
							label: '09:00'
						},
						{
							value: '4',
							label: '09:30'
						},
						{
							value: '5',
							label: '10:00'
						},
						{
							value: '6',
							label: '10:30'
						},
						{
							value: '7',
							label: '11:00'
						},
						{
							value: '8',
							label: '11:30'
						},
						{
							value: '9',
							label: '12:00'
						},
						{
							value: '10',
							label: '12:30'
						},
						{
							value: '11',
							label: '13:00'
						},
						{
							value: '12',
							label: '13:30'
						},
						{
							value: '13',
							label: '14:00'
						},
						{
							value: '14',
							label: '14:30'
						},
						{
							value: '15',
							label: '15:00'
						},
						{
							value: '16',
							label: '15:30'
						},
						{
							value: '17',
							label: '16:00'
						},
						{
							value: '18',
							label: '16:30'
						},
						{
							value: '19',
							label: '17:00'
						},
						{
							value: '20',
							label: '17:30'
						},
						{
							value: '21',
							label: '18:00'
						},
						{
							value: '22',
							label: '18:30'
						},
						{
							value: '23',
							label: '19:00'
						},
						{
							value: '24',
							label: '19:30'
						},
						{
							value: '25',
							label: '20:00'
						},
						{
							value: '26',
							label: '20:30'
						},
						{
							value: '27',
							label: '21:00'
						},
						{
							value: '28',
							label: '21:30'
						},
						{
							value: '29',
							label: '22:00'
						},
						{
							value: '29',
							label: '22:30'
						},
						{
							value: '30',
							label: '23:00'
						}
					],
					[
						{
							value: '1',
							label: '08:00'
						},
						{
							value: '2',
							label: '08:30'
						},
						{
							value: '3',
							label: '09:00'
						},
						{
							value: '4',
							label: '09:30'
						},
						{
							value: '5',
							label: '10:00'
						},
						{
							value: '6',
							label: '10:30'
						},
						{
							value: '7',
							label: '11:00'
						},
						{
							value: '8',
							label: '11:30'
						},
						{
							value: '9',
							label: '12:00'
						},
						{
							value: '10',
							label: '12:30'
						},
						{
							value: '11',
							label: '13:00'
						},
						{
							value: '12',
							label: '13:30'
						},
						{
							value: '13',
							label: '14:00'
						},
						{
							value: '14',
							label: '14:30'
						},
						{
							value: '15',
							label: '15:00'
						},
						{
							value: '16',
							label: '15:30'
						},
						{
							value: '17',
							label: '16:00'
						},
						{
							value: '18',
							label: '16:30'
						},
						{
							value: '19',
							label: '17:00'
						},
						{
							value: '20',
							label: '17:30'
						},
						{
							value: '21',
							label: '18:00'
						},
						{
							value: '22',
							label: '18:30'
						},
						{
							value: '23',
							label: '19:00'
						},
						{
							value: '24',
							label: '19:30'
						},
						{
							value: '25',
							label: '20:00'
						},
						{
							value: '26',
							label: '20:30'
						},
						{
							value: '27',
							label: '21:00'
						},
						{
							value: '28',
							label: '21:30'
						},
						{
							value: '29',
							label: '22:00'
						},
						{
							value: '29',
							label: '22:30'
						},
						{
							value: '30',
							label: '23:00'
						}
					],
				]
			};
		},
		onLoad(option) {
			this.productId = option.id
			this.getProdcutInfo()
			this.getDates()
			this.getUserInfo()
			this.getHiredate()
		},
		methods: {
			preview(i){
				uni.previewImage({
					// 预览时，默认显示图片的索引
					current:i,
					// 所有图片 url 地址的数组
					urls:this.swiperImg.map(item => item)
				})
			},
			//获取今天和明天的日期
			getDates() {
			  const today = new Date();
			  const tomorrow = new Date();
			  tomorrow.setDate(today.getDate() + 1);
			  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
			
			  const yearToday = today.getFullYear();
			  const monthToday = today.getMonth() + 1;
			  const dayToday = today.getDate();
			  this.today = `${yearToday}-${monthToday}-${dayToday}`;
			  this.startweek = weekdays[today.getDay()];
			  this.start = `${yearToday}-${monthToday}-${dayToday}`;
			  
			
			  const yearTomorrow = tomorrow.getFullYear();
			  const monthTomorrow = tomorrow.getMonth() + 1;
			  const dayTomorrow = tomorrow.getDate();
			  this.endweek = weekdays[tomorrow.getDay()];
			  this.end = `${yearTomorrow}-${monthTomorrow}-${dayTomorrow}`;
			},
			gocomment(id) {
				uni.navigateTo({
					url: '/pagesC/comment/comment?id=' +id
				})
			},
			getProdcutInfo() {
				uni.request({
					url: uni.getStorageSync('URL') +'home/hire/Hire/getcarDetail',
					method: 'POST',
					data: {
						carid: this.productId
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						this.productInfo = res.data.data
						this.butvalue = res.data.data.carstatus
						this.swiperImg = res.data.data.thumbs_text
						this.videoSrc = res.data.data.vedio_text
						this.mendianId = res.data.data.stoid
						if(this.mendianId == 1) {
							this.mendian = '拱北店'
						}else{
							this.mendian = '香洲店'
						}
						this.getCommentList()
					}
				})
			},
			getHiredate() {
				const start = this.start + ' ' + this.starttime
				const end = this.end + ' ' + this.endtime
				uni.request({
					url: uni.getStorageSync('URL') +'home/hire/Hire/getHiredate',
					method: 'POST',
					data: {
						carid: this.productId,
						start: start,
						end: end
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						this.hirecar = res.data
					}
				})
			},
			selectCar(stoid,start,end,id) {
				if(this.starttime == '00:00' || this.endtime == '00:00' ){
					uni.$u.toast('请选择取车时间或还车时间')
				}else {
					let testArray = {
						stoid: stoid,
						start: start + ' ' + this.starttime,
						end: end + ' ' + this.endtime,
						id: id
					};
					let testStr = encodeURIComponent(JSON.stringify(testArray));
					
					if(this.mendianId == 0) {
						uni.$u.toast('请选择门店')
					}else if(this.openid == '' || this.openid == undefined || this.userData == ''){	
						setTimeout(() => {
							uni.$u.toast('请先登录')
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/user/user'
								})
							}, 1500)
						}, 0);
					}else if(this.end == '' || this.start == '') {
						uni.$u.toast('请选择取车日期或还车日期')
					}else{
						uni.navigateTo({
							url: '/pagesC/confirmOrder/confirmOrder?item=' + testStr
						})
					}
				}
			},
			orderStartdate(){
				let myDate = new Date();
				let year=myDate.getFullYear();//获取当前年
				let month=myDate.getMonth()+1;//获取当前月
				let date=myDate.getDate(); //获取当前日
				let h=myDate.getHours();       //获取当前小时数(0-23)
				let m=myDate.getMinutes();     //获取当前分钟数(0-59)
				let now= year + '-' + month + "-" + date + " " + h + ':' + m ;//当前系统时间
				let twoTime=new Date(now).getTime()+ 1*2*60*60*1000;//当前系统两小时候后的时间
				let seldata=new Date(this.start + ' ' + this.starttime).getTime();//选择的时间
				let nowdata=new Date(now).getTime();//当前时间的时间戳
				if(seldata <= nowdata){
					let date = new Date(twoTime);
					let Y = date.getFullYear() + "-";
					let M = date.getMonth()+1 +'-';
					let D = date.getDate()+' ';
					let h = date.getHours() + ":";
					let m = date.getMinutes();
					let s = date.getSeconds();
					console.log(Y + M + D + h + m) 
					this.start = Y + M + D
					this.starttime = h + m
					this.buttips = true
				}
				
			},
			selMendian(e) {
				this.mendian = e[0].label
				this.mendianId = e[0].value
			},
			change(e) {
				this.start = e.startYear + '-' + e.startMonth + '-' + e.startDay
				this.startweek = e.startWeek
				this.end = e.endYear + '-' + e.endMonth + '-' + e.endDay
				this.endweek = e.endWeek
				this.data = '至'
				this.starttime = '00:00'
				this.endtime = '00:00'
				this.getHiredate()
			},
			getCommentList() {
				uni.request({
					url: uni.getStorageSync('URL') +'home/hire/Hire/getCommentList',
					method: 'POST',
					data: {
						hireid: this.productId
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						this.commentData= res.data.data
					}
				})
			},
			getUserInfo() {
				this.userData = uni.getStorageSync('userData');
				this.openid = uni.getStorageSync('openid');
			},
			timeConfirm(e) {
				this.starttime = e[0].label
				this.endtime = e[1].label
				this.orderStartdate()
				this.getHiredate()
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: white;
}
.uni-margin-wrap {
	width: 690rpx;
	width: 100%;
	.swiper {
		height: 400rpx;
		.swiper-item {
			display: block;
			height: 350rpx;
			line-height: 350rpx;
			text-align: center;
		}
	}
}
.video {
	height: 100%;
	width: 100%;
}
.car-info {
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	.info-left {
		.car-name {
			font-size: 1.25rem;
			color: black;
			font-weight: bold;
			margin-bottom: 15rpx;
		}
		.carde {
			display: flex;
			.carpeizhi {
				color: #909090;
				font-size: 0.9rem;
				margin-bottom: 20rpx;
			}
			.cardetail {
				margin-left: 10px;
				color: #7bb8b3;
				font-size: 0.9rem;
			}
		}
	}
	.info-right {
		// width: 130px;
		height: 30px;
		line-height: 30px;
		.right-price {
			display: flex;
			align-items: flex-end;
			line-height: 1;
		}
	}
}
.configuration {
	.configuration-title {
		// color: black;
		font-size: 1.25rem;
		padding: 10rpx;
		// margin-left: 10px;
		border-bottom: 1px solid #bababa;
		border-top: none;
		border-left: none;
		border-right: none;
		text-align: center;
	}
	.configuration-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.content-item {
			width: calc(33.33% - 10px);
			height: 60px;
			margin-bottom: 10px;
			text-align: center;
			.item-top {
				margin-top: 10px;
				font-size: 1rem;
			}
			.item-bottom {
				margin-top: 5px;
				color: #ccc;
				font-size: 1rem;
			}
		}
	}
}
.seecomment {
	// margin-right: 20px;
	height: 50px;
	width: 90%;
	line-height: 50px;
	background-color: #f5f3f6;
	margin: 0 auto;
	border-radius: 10px;
	.seecomment-text {
		display: flex;
		justify-content: space-between;
		.text-left {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			margin-left: 20px;
			letter-spacing: 1px;
		}
		.text-right {
			display: flex;
			margin-right: 20px;
			font-size: 0.9rem;
			letter-spacing: 1px;
		}
	}
}
.select{
	background-color: #f5f3f6;
	width: 90%;
	height: auto;
	margin: 20px auto;
	padding: 15rpx;
	border-radius: 30rpx;
	// box-shadow: 0px 5px 10px 0px #2279ee;
	.sel-top {
		background-color: #fff;
		height: 70px;
		padding: 10px;
		border-radius: 30rpx;
		.top-title {
			color: #949494;
			font-size: 0.9rem;
		}
		.top-content {
			margin-top: 20rpx;
			text-align: center;
			font-size: 1.3rem;
			color: black;
		}
	}
	.sel-content {
		padding: 10px;
		margin-top: 15rpx;
		.con-title {
			color: #db8b36;
			font-size: 0.9rem;
			text-align: center;
		}
		.con-content{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			font-size: 1.3rem;
			color: black;
			.content-item {
				font-size: 1.3rem;
				color: black;
				.item-title {
					text-align: center;
					font-size: 0.9rem;
					color: #a19fa2;
				}
				.item-bot {
					text-align: center;
					font-size: 0.9rem;
					color: #a19fa2;
				}
			}
		}
	}
	.sel-time {
		padding: 10px;
		margin-top: 15rpx;
		.time-title {
			text-align: center;
			font-size: 0.9rem;
			color: #db8b36;
		}
		.time-content {
			.con-content {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				font-size: 1.3rem;
				color: black;
				.content-item {
					.item-title {
						text-align: center;
						font-size: 0.9rem;
						color: #a19fa2;
					}
				}
			}
			
		}
	}
	.sel-but {
		margin-top: 15rpx;
	}
}
.quany {
	height: 200px;
}
.quanyititle {
	font-size: 1.25rem;
	color: black;
	font-weight: bold;
	margin-left: 15px;
}
.quanyiimage{
	height: 50px;
	width: 100%;
	margin-top: 10px;
	display: flex;
	justify-content: space-around;
	.imgitem {
		height: 50px;
		width: 18%;
		text-align: center;
		font-size: 0.9rem;
		image {
			width: 100%;
			height: 100%;
		}
	}
	
}
.imglist {
	margin-top: 40px;
	width: 100%;
	height: 100%;
	.imglist-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		image{
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}
	}

}
.but {
	margin: 0 auto;
	position: fixed;
	bottom: 20px;
	width: 100%;
	padding: 10px;
}
</style>
